<template>
  <div class="app-container" style="padding: 30px 30px 30px 70px">
    <el-row type="flex">
      <el-form :model="account" label-width="80px" label-position="left">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="用户账号">
            <div>{{account.accountName}}</div>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="account.systemUsername" placeholder="用户姓名"/>
          </el-form-item>
          <el-form-item label="用户编号">
            <el-input v-model="account.accountCode" placeholder="用户编号"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
          <el-form-item label="用户职务">
            <el-button v-waves type="primary" size="small" @click="handleAddPrincipal">添加职务</el-button>
            <el-table
              size="mini"
              :data="principals"
              row-key="principalId"
              ref="table"
              style="width: 100%;margin-top:30px;"
              border
            >
              <el-table-column align="center" label="隶属部门">
                <template slot-scope="scope">
                  <svg-icon icon-class="star" style="color: #ffba00"  v-if="isPriorityPrincipal(scope.row.principalId)" />
                  {{ scope.row.department.departmentName}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="部门代码">
                <template slot-scope="scope">
                  {{ scope.row.department.departmentCode }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="部门职务">
                <template slot-scope="scope">
                  {{ scope.row.duty.dutyName }}
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" width="180px">
                <template slot-scope="scope">
                  <el-button v-waves type="primary" size="small" @click="handleEditPrincipal(scope)">编辑</el-button>
                  <el-button v-waves type="danger" size="small" v-if="!isPriorityPrincipal(scope.row.principalId)"  @click="handleDeletePrincipal(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="状态">
            <el-select v-model="account.securityStatus" placeholder="请选择">
              <el-option
                v-for="item in securityStatus"
                :key="item.key"
                :label="item.value"
                :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-waves type="primary" @click="saveAccount">保存</el-button>
            <el-button v-waves type="danger" @click="returnBefore">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-dialog :visible.sync="dialog.visible" :title="dialog.title">
      <el-form :model="principal" label-width="120px" label-position="left" style="margin: 0px 20px 0px 20px">
        <el-form-item label="隶属部门">
          <el-select v-model="principal.departmentId" placeholder="请选择" @change="clearDutySelect">
            <el-option
              v-for="item in dictDept"
              :key="item.departmentId"
              :label="item.departmentName+ ' ( '+item.departmentCode+' ) '"
              :value="item.departmentId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门职务">
          <el-select v-model="principal.dutyId" placeholder="请选择" ref="dutySelect">
            <el-option
              v-for="item in deptDuties"
              :key="item.dutyId"
              :label="item.dutyName"
              :value="item.dutyId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialog.visible=false">取消</el-button>
          <el-button type="primary" @click="savePrincipal">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { deepClone } from '@/utils'
import { loadDepartment } from '@/api/dict'
import { accountInfo, editAccount, addPrincipal, editPrincipal, removePrincipal } from '@/api/account'
const defaultAccount = {
  accountId: null,
  accountName: null,
  accountCode: null,
  systemUsername: null,
  securityStatus: null,
  priorityPrincipalId: null
}
const defaultPrincipal = {
  principalId: null,
  dutyId: null,
  departmentId: null
}
export default {
  directives: { waves },
  props: ['accountId'],
  data() {
    return {
      account: deepClone(defaultAccount),
      principal: deepClone(defaultPrincipal),
      dictDept: [],
      securityStatus: [
        { key: 0, value: '正常' },
        { key: 1, value: '锁定' },
        { key: 4, value: '禁用' }
      ],
      dialog: {
        visible: false,
        title: '',
        addTitle: '添加职务',
        editTitle: '修改职务',
        type: '',
        addType: 'add',
        editType: 'edit'
      }
    }
  },
  computed: {
    principals() {
      if (this.account.principals) {
        return this.account.principals
      }
      return []
    },
    deptDuties() {
      const departmentId = this.principal.departmentId
      if (!departmentId) {
        return []
      }
      const dept = this.dictDept.find(v => v.departmentId === departmentId)
      if (!dept) {
        return []
      }
      return dept.duties
    }
  },
  created() {
    try {
      Promise.all([this.getAccountInfo(), this.loadDictDepartment()])
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    async loadDictDepartment() {
      this.dictDept = await loadDepartment()
    },
    async getAccountInfo() {
      if (!this.accountId) {
        console.log('账号id错误')
        return
      }
      this.account = await accountInfo(this.accountId)
    },
    async savePrincipal() {
      let notifyTitle = ''
      const { principalId, dutyId, departmentId } = this.principal
      const request = {
        accountId: this.account.accountId,
        principal: {
          dutyId,
          departmentId
        }
      }
      if (this.dialog.type === this.dialog.addType.toString()) {
        notifyTitle = '添加成功'
        await addPrincipal(request)
      }
      if (this.dialog.type === this.dialog.editType.toString()) {
        notifyTitle = '修改成功'
        request.principal.principalId = principalId
        await editPrincipal(request)
      }
      const notify = { // notify
        title: `${notifyTitle}`,
        type: 'success'
      }
      this.$notify(notify)
      await this.getAccountInfo() // reload
      this.dialog.visible = false// close dialog
    },
    async saveAccount() {
      await editAccount(this.account)
      const { accountName, systemUsername, accountCode } = this.account
      const notify = { // notify
        title: '修改成功',
        type: 'success',
        dangerouslyUseHTMLString: true,
        message: `<div>用户账户: ${accountName}</div><div>用户名称: ${systemUsername}</div><div>用户代码: ${accountCode}</div>`
      }
      this.$notify(notify)
      this.$router.push({ path: '/account/index' })
    },
    handleAddPrincipal() {
      this.dialog.type = this.dialog.addType.toString()
      this.dialog.title = this.dialog.addTitle.toString()
      this.principal = deepClone(defaultPrincipal) // clear
      this.dialog.visible = true // open dialog
    },
    handleEditPrincipal(scope) {
      this.dialog.type = this.dialog.editType.toString()
      this.dialog.title = this.dialog.editTitle.toString()
      this.principal = deepClone(defaultPrincipal) // clear
      this.dialog.visible = true // open dialog
      this.principal = this.account.principals.find(v => scope.row.principalId === v.principalId)
    },
    handleDeletePrincipal(scope) {
    },
    returnBefore() {
      this.$router.push({ path: '/account/index' })
    },
    isPriorityPrincipal(principalId) {
      return this.account.priorityPrincipalId === principalId
    },
    clearDutySelect() { // 部门select级联触发职务select清空选中
      this.principal.dutyId = null
    }
  }
}
</script>

<style scoped>

</style>
